<template>
    <Header title="账号管理"></Header>
  <div class="account-management">
   
    <div class="form-section">
      <div class="form-item">
        <label for="nickname">昵称</label>
        <input type="text" id="nickname" placeholder="请输入昵称" v-model="nickName"/>
      </div>
      <div class="form-item">
        <label for="signature">个性签名</label>
        <input type="text" id="signature" value="授人与鱼不如授人与鱼" />
      </div>
      <div class="form-item">
        <label for="password">修改密码</label>
        <input type="password" id="password" placeholder="请输入密码" v-model="password"/>
      </div>
    </div>
    <button class="save-btn" @click="save">保存</button>
    <button class="logout-btn" @click="logout">退出登录</button>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import Header from "../../components/Header.vue";
import { toRefs } from "vue";
import { useRouter } from "vue-router"; 
const router = useRouter();



const data = reactive({
  nickName: "",
  password: "",
  desc: "",
});

const {nickName,password,desc} = {...toRefs(data)}

//保存

function save(){
  if(nickName.value.length == 0){
    alert('请输入昵称')
    return
  }
  const u = JSON.parse(localStorage.userInfo)
  const newUserInfo = {nick_name:u['user_name'],password:password.value,nick_name:nickName.value,desc:desc.value}

  localStorage.setItem('userInfo',JSON.stringify(newUserInfo))

  router.push('/my')

}





function logout(){
    localStorage.removeItem('isLogin');
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.account-management {
  width: 300px;
  margin: 50px auto;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.back-icon {
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
  background-size: cover;
  margin-right: 10px;
  cursor: pointer;
}

h2 {
  font-size: 18px;
  font-weight: normal;
}

.form-section {
  margin-bottom: 20px;
}

.form-item {
  margin-bottom: 15px;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.form-item input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.save-btn,
.logout-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14px;
  color: white;
}

.save-btn {
  background-color: #f9a825;
}

.logout-btn {
  background-color: #f9a825;
}
</style>